<template>
	<view class="SongListDetail">
		<!-- 歌单详细 -->
		<Transition enter-active-class="animate__animated animate__fadeIn">
			<view v-show="songlist.length!=0">
				<!-- 封面 -->
				<view class="head">
					<view class="flex-center">
						<view>
							<image :src="data.logo" mode="aspectFit"></image>
							<view> <span style="font-size: 1em;" class="iconfont icon-bofang"></span>
								{{(data.visitnum/10000).toFixed(1)}}万
							</view>
						</view>
					</view>
					<view>
						<view>{{data.dissname}}</view>
						<view>
							<view>
								<image :src="data.headurl" mode="aspectFill"></image>
							</view>
							<view>{{data.nick}}</view>

						</view>
						<view @click="showToast">
							简介:<view v-html="data.desc" ref="desc"></view>
						</view>
					</view>
					<view class="backdrop" :style="'background-image: url('+data.logo+');'">
						<!-- <image :src="data.logo" mode="widthFix"></image> -->
						<view></view>
					</view>
				</view>
				<!-- 歌曲列表 -->
				<view class="songList">
					<view v-for="(item,index) in getPageData(songlist,1,pageSize)">
						<view class="flex-center">{{index+1}}</view>
						<view @click="getMusicPlay(item.mid)">
							<view :class="{focusSong:globalData.data.value.songmid==item.mid}">{{item.name}}</view>
							<view>{{item.singer[0].name}} - {{item.album.name}}</view>
						</view>
						<view class="flex-center">
							<uni-icons type="folder-add" @click="AddSongList(item)"></uni-icons>
						</view>
					</view>
				</view>

			</view>
		</Transition>
		<AudioPlayer></AudioPlayer>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		GetSongListDetail,
		GetMusicPlay
	} from "@/utils/MusicAPI.js"

	import {
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app"
	const globalData = getApp().globalData

	const AddSongList = (item) => {
		// const songlist = globalData.songlist

		// let index = songlist.findIndex(i => i.songmid == item.mid); // 判断元素是否存在及位置 
		// if (index > -1) {
		// 	songlist.splice(index, 1); // 从原位置移除  
		// 	songlist.unshift(songlist[index]); // 将元素添加到数组开头  
		// 	uni.showToast({
		// 		icon: "none",
		// 		title: "添加播放列表成功"
		// 	});
		// } else {
		// 	GetMusicPlay(item.mid).then(res => {
		// 		if (res.data.data.playUrl[item.mid].url == "") {
		// 			title = "此歌曲吗有播放链接呢试试其他的吧 (●'◡'●)"
		// 		} else {
		// 			const data = {
		// 				playUrl: res.data.data.playUrl[item.mid].url,
		// 				item: item,
		// 				songmid: item.mid
		// 			}
		// 			songlist.push(data);

		// 			uni.showToast({
		// 				icon: "none",
		// 				title: "添加播放列表成功"
		// 			});
		// 			console.log(songlist)
		// 		}
		// 	}).catch(err => {
		// 		console.log("获取歌曲播放链接", err)
		// 		uni.showToast({
		// 			icon: "none",
		// 			title: "获取歌曲播放链接错误"
		// 		});
		// 	})

		// }
	}


	// 存放歌单详细
	const data = ref({
		logo: "",
		visitnum: "",
		desc: ""
	})
	const desc = ref()
	const showToast = () => {
		uni.showModal({
			content: desc.value.$el.innerText,
			showCancel: false,
			icon: "none"
		})
	}
	// 存放歌曲列表
	const songlist = ref([])
	onLoad((open) => {
		uni.showLoading({
			title: "正在加载"
		})
		GetSongListDetail(open.data).then(res => {
			data.value = res.data.response.cdlist[0]
			songlist.value = res.data.response.cdlist[0].songlist
			globalData.songlist = songlist.value
			console.log(songlist.value)
			console.log(globalData.songlist)
			//console.log(res.data.response.cdlist[0])
			uni.hideLoading();
		}).catch(err => {
			console.log("获取歌单详情", err)
		})
	})
	//展示数据量
	const pageSize = ref(10)
	//设置 页码
	const getPageData = (arr, page, pageSize) => {
		// 计算当前页需要跳过的元素数量  
		const skip = (page - 1) * pageSize;
		// 切片操作，获取当前页的元素  
		// 注意：slice 方法不会改变原数组，而是返回一个新数组  
		const currentPageData = arr.slice(skip, skip + pageSize);
		return currentPageData;
	}

	onReachBottom(() => {
		uni.showLoading({
			title: "正在加载"
		})

		if (songlist.value.length > pageSize.value) {
			pageSize.value += 10
			setTimeout(function() {
				uni.hideLoading();
			}, 1000);
		}
	})

	//获取歌曲播放链接
	const getMusicPlay = (songmid) => {
		GetMusicPlay(songmid).then(res => {
			if (res.data.data.playUrl[songmid].url == "") {
				uni.showToast({
					icon: "none",
					title: "此歌曲吗有播放链接呢试试其他的吧 (●'◡'●)",
				});

			} else {
				toMusicPlay(res.data.data.playUrl[songmid].url, songmid)
			}
		}).catch(err => {
			console.log("获取歌曲播放链接", err)
		})
	}
	//跳转音乐播放页
	const toMusicPlay = (playUrl, songmid) => {
		const data = getApp().globalData.data
		data.value.playUrl = playUrl
		data.value.songmid = songmid
		uni.navigateTo({
			url: "/pages/MusicPlay/MusicPlay"
		})
	}
</script>

<style scoped>
	image {
		width: 100%;
		height: 100%;
		transform: scale(1.1);
	}

	.SongListDetail {
		padding-bottom: 100rpx;
	}

	.head {

		width: 100%;
		aspect-ratio: 1000/618;
		overflow: hidden;
		display: grid;
		grid-template-columns: 30% 70%;
		grid-column-gap: 5%;
		padding: 0 5%;
		box-sizing: border-box;
		position: sticky;
		/* top: 0; */
		z-index: 1;
		margin-bottom: 50rpx;
	}

	.backdrop {
		width: 100%;
		height: 100%;
		position: absolute;
		bottom: 0;
		z-index: -1;
		background: center center no-repeat 100% 100%;
	}

	.backdrop>view {
		width: 100%;
		height: 100%;
		background-color: rgba(27, 27, 37, 0.8);
		backdrop-filter: blur(5px);
	}



	.head>view:nth-child(1)>view {
		width: 100%;
		aspect-ratio: 1/1;
		overflow: hidden;
		border-radius: 10px;
		position: relative;
		background-color: rgba(64, 64, 88, 0.6);
		box-shadow: 0 0 5px 3px rgba(64, 64, 88, 0.6);

	}

	.head>view:nth-child(1)>view>view {
		position: absolute;
		bottom: 0;
		right: 0;
		padding: 1% 5%;
		border-radius: 50px;
		background-color: rgba(27, 27, 37, 0.6);
		font-size: 0.7em;

	}

	.head>view:nth-child(2) {
		margin: auto 0;
		padding-right: 5%;
	}

	.head>view:nth-child(2)>view:nth-child(1) {
		overflow: hidden;
		font-size: 1.1em;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.head>view:nth-child(2)>view:nth-child(2) {
		display: flex;
		height: 1.3em;
		margin: 5% 0;

	}

	.head>view:nth-child(2)>view:nth-child(2)>view:nth-child(1) {
		height: 100%;
		aspect-ratio: 1/1;
		border-radius: 50px;
		overflow: hidden;
		margin-right: 5%;
	}

	.head>view:nth-child(2)>view:nth-child(3) {
		display: flex;
		font-size: 0.9em;

	}

	.head>view:nth-child(2)>view:nth-child(3)>view {
		width: 80%;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}


	.songList>view {
		display: grid;
		grid-template-columns: 10% 70% 20%;
		box-sizing: border-box;
		height: 100rpx;
		margin-bottom: 20rpx;
		color: #7a7a7a;
	}

	.songList>view>view:nth-child(2) {
		display: flex;
		flex-direction: column;
		justify-content: center;

	}

	.songList>view>view:nth-child(2)>view:nth-child(1) {
		color: #dddddd;
	}

	.songList>view>view:nth-child(2)>view:nth-child(2) {
		text-indent: 1em;
		margin-top: 0.1em;
		font-size: 0.9em;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}
</style>